<template>
  <div class="chart-video">
    <div v-if="!show" class="play-button">
      <div class="button" @click="getVideo()">
        <LoadingOutlined style="font-size: 60px; display: flex; justify-content: center; align-items: center; font-weight: 700" />
      </div>
    </div>
    <div v-else class="chart-video-player vjs-big-play-centered" :id="id"></div>
  </div>
</template>

<script>
  import videojs from 'video.js';
  import '@videojs/http-streaming';
  import 'video.js/dist/video-js.css';

  export default {
    props: {
      id: {
        type: String,
        default: 'chart_video_js',
      },
      videoUrl: {
        type: String,
        default: '',
      },
      currentTime: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        show: false,
        camList: [],
        options: {
          autoplay: true, // 设置自动播放
          muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
          controls: true,
          preload: 'auto',
        },
        player: null,
        url: '',
      };
    },
    methods: {
      end() {
        if (this.player) {
          this.player.dispose();
          this.player = null;
        }
        this.show = false;
      },
      // 初始化视频
      getVideo(nowPlayVideoId = `dom_${this.id}`) {
        this.show = true;
        this.$nextTick(() => {
          const parentDom = document.getElementById(this.id);
          const existingVideoDom = document.getElementById(nowPlayVideoId);
          if (existingVideoDom) {
            parentDom.removeChild(existingVideoDom);
          }
          setTimeout(() => {
            let videoDom = document.createElement('video');
            videoDom.setAttribute('id', nowPlayVideoId);
            videoDom.setAttribute('class', 'video-js');
            videoDom.setAttribute('style', 'width: 100%; height: 100%');
            this.$nextTick(() => {
              parentDom.appendChild(videoDom);
              this.player = videojs(nowPlayVideoId, this.options);
              // 配置HLS流支持
              this.player.src([
                {
                  src: this.url,
                  // type: 'application/x-mpegURL',
                  type: 'video/mp4',
                },
              ]);
            });
          }, 0 * 1000);
        });
      },
      reloadVideo() {
        this.show = false;
        if (this.player) {
          this.player.dispose();
        }
        this.player = null;
        this.getVideo();
      },
      changeTime(time) {
        this.player.currentTime(time);
      },
    },
    mounted() {},
    unmounted() {
      console.log('销毁');
      this.show = false;
      if (this.player) {
        this.player.dispose();
      }
      this.player = null;
      this.end();
    },
    watch: {
      videoUrl: {
        handler(val, _) {
          this.$nextTick(() => {
            this.url = val;
            this.reloadVideo();
          });
        },
        immediate: true,
      },
      currentTime: {
        handler(val, _) {
          this.$nextTick(() => {
            this.changeTime(val);
          });
        },
        immediate: true,
      },
    },
  };
</script>

<style lang="less" scoped>
  .chart-video {
    width: 100%;
    height: 100%;
    .play-button {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: relative;
      .button {
        background-color: #d5d5d5;
        opacity: 0.2;
        width: 120px;
        height: 80px;
        border-radius: 10px;
        position: absolute;
        top: calc(50% - 40px);
        left: calc(50% - 60px);
        cursor: pointer;
        border: 2px solid #fff;
      }
      .center {
        width: 0;
        height: 0;
        border: 20px solid;
        border-color: rgba(0, 0, 0, 0);
        border-left-color: #fff;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 10px);
        cursor: pointer;
      }
    }
    .chart-video-player {
      width: 100%;
      height: 100%;
    }
    /* 隐藏进度条 */
    &:deep .vjs-progress-control {
      height: 0 !important;
      overflow: hidden !important;
    }
    &:deep .vjs-remaining-time {
      height: 0 !important;
      overflow: hidden !important;
    }
  }
</style>
